<script>
import { ElMessage } from 'element-plus';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import { arrHasData, deepCopy, isEmpty } from '/@/utils';
import ParamsSelector from '/@/components/common/paramsSelector/ParamsSelector.vue';
import MySwitch from '/@/components/base/MySwitch.vue';
export default {
	name: 'SpecificationSet',
	components: { PictureSelectorDialog, ParamsSelector, MySwitch },
	props: {
		modelValue: {
			type: Array,
			default: () => [],
		},
	},
	setup(props) {
		const ruleForm = ref({ skuParameterList: [] });
		const dialogFormVisible = ref(false);
		const isShowPicSelector = ref(false);
		const tableData = computed(() => props.modelValue);
		const mulPrice = ref(0);
		const editIndex = ref(-1);
		const uploadPicIndex = ref(-1);
		return {
			min: 0,
			max: 99999999,
			precision: 2,
			tableData,
			ruleForm,
			dialogFormVisible,
			isShowPicSelector,
			mulPrice,
			editIndex,
			uploadPicIndex,
			handleEdit(row, index) {
				dialogFormVisible.value = true;
				if (!row.skuParameterList) row.skuParameterList = [];
				ruleForm.value = deepCopy(row);
				//设置参数选择框回显
				const skuParameterList = ruleForm.value.skuParameterList.map((item) => {
					item.paramsItem = { ...item };
					return item;
				});
				ruleForm.value.skuParameterList = skuParameterList;
				//
				editIndex.value = index;
			},
			plusParams() {
				if (!ruleForm.value.skuParameterList) ruleForm.value.skuParameterList = [];
				ruleForm.value.skuParameterList.push({});
			},
			//保存商品参数
			save() {
				let isValid = true;
				const requireList = ['paramsItem', 'attributeValue'];
				const skuParameterList = ruleForm.value.skuParameterList.map((item) => {
					const { paramsItem, ...data } = item;
					if (data.paramsItem) delete data.paramsItem;
					if (requireList.find((key) => isEmpty(item[key]))) isValid = false;
					return { ...paramsItem, ...data };
				});
				if (!isValid) return ElMessage.warning('更新失败，存在未填写的参数或参数值！');
				ruleForm.value.skuParameterList = skuParameterList;
				tableData.value.splice(editIndex.value, 1, ruleForm.value);
				ruleForm.value = { skuParameterList: [] };
				dialogFormVisible.value = false;
			},
			getPic(pic) {
				if (!arrHasData(pic)) return;
				tableData.value[uploadPicIndex.value].pic = pic[0].imgUrl;
			},
			multipleSetPrice(key) {
				tableData.value.forEach((item) => {
					item[key] = mulPrice.value;
				});
				mulPrice.value = 0;
			},
			uploadPic(index) {
				uploadPicIndex.value = index;
				isShowPicSelector.value = true;
			},
			toDel(index) {
				ruleForm.value.skuParameterList.splice(index, 1);
			},
		};
	},
};
</script>
<template>
	<div class="SpecificationSet">
		<el-table :data="tableData" style="width: 100%" class="SpecificationSet_table">
			<el-table-column prop="spData" label="规格" />
			<el-table-column width="110px">
				<template #header>
					<span>美元价格</span>
					<el-popover placement="top" :width="310" trigger="click">
						<span style="margin-right: 10px">批量设置价格</span>
						<Num v-model="mulPrice" :min="min" :max="max" :precision="precision" style="margin-right: 10px" />
						<el-button type="primary" @click="multipleSetPrice('usPrice')">更新价格</el-button>
						<template #reference>
							<a href="javascript:;"><Icon name="Edit" /></a>
						</template>
					</el-popover>
				</template>
				<template #default="scope">
					<Num v-model="scope.row.usPrice" :min="min" :max="max" :precision="precision" />
				</template>
			</el-table-column>
			<el-table-column width="110px">
				<template #header>
					<span>美元原价</span>
					<el-popover placement="top" :width="310" trigger="click">
						<span style="margin-right: 10px">批量设置价格</span>
						<Num v-model="mulPrice" :min="min" :max="max" :precision="precision" style="margin-right: 10px" />
						<el-button type="primary" @click="multipleSetPrice('usOriginalPrice')">更新价格</el-button>
						<template #reference>
							<a href="javascript:;"><Icon name="Edit" /></a>
						</template>
					</el-popover>
				</template>
				<template #default="scope">
					<Num v-model="scope.row.usOriginalPrice" :min="min" :max="max" :precision="precision" />
				</template>
			</el-table-column>
			<el-table-column width="110px">
				<template #header>
					<span>英镑价格</span>
					<el-popover placement="top" :width="310" trigger="click">
						<span style="margin-right: 10px">批量设置价格</span>
						<Num v-model="mulPrice" :min="min" :max="max" :precision="precision" style="margin-right: 10px" />
						<el-button type="primary" @click="multipleSetPrice('ukPrice')">更新价格</el-button>
						<template #reference>
							<a href="javascript:;"><Icon name="Edit" /></a>
						</template>
					</el-popover>
				</template>
				<template #default="scope">
					<Num v-model="scope.row.ukPrice" :min="min" :max="max" :precision="precision" />
				</template>
			</el-table-column>
			<el-table-column width="110px">
				<template #header>
					<span>英镑原价</span>
					<el-popover placement="top" :width="310" trigger="click">
						<span style="margin-right: 10px">批量设置价格</span>
						<Num v-model="mulPrice" :min="min" :max="max" :precision="precision" style="margin-right: 10px" />
						<el-button type="primary" @click="multipleSetPrice('ukOriginalPrice')">更新价格</el-button>
						<template #reference>
							<a href="javascript:;"><Icon name="Edit" /></a>
						</template>
					</el-popover>
				</template>
				<template #default="scope">
					<Num v-model="scope.row.ukOriginalPrice" :min="min" :max="max" :precision="precision" />
				</template>
			</el-table-column>
			<el-table-column width="110px">
				<template #header>
					<span>欧元价格</span>
					<el-popover placement="top" :width="310" trigger="click">
						<span style="margin-right: 10px">批量设置价格</span>
						<Num v-model="mulPrice" :min="min" :max="max" :precision="precision" style="margin-right: 10px" />
						<el-button type="primary" @click="multipleSetPrice('euPrice')">更新价格</el-button>
						<template #reference>
							<a href="javascript:;"><Icon name="Edit" /></a>
						</template>
					</el-popover>
				</template>
				<template #default="scope">
					<Num v-model="scope.row.euPrice" :min="min" :max="max" :precision="precision" />
				</template>
			</el-table-column>
			<el-table-column width="110px">
				<template #header>
					<span>欧元原价</span>
					<el-popover placement="top" :width="310" trigger="click">
						<span style="margin-right: 10px">批量设置价格</span>
						<Num v-model="mulPrice" :min="min" :max="max" :precision="precision" style="margin-right: 10px" />
						<el-button type="primary" @click="multipleSetPrice('euOriginalPrice')">更新价格</el-button>
						<template #reference>
							<a href="javascript:;"><Icon name="Edit" /></a>
						</template>
					</el-popover>
				</template>
				<template #default="scope">
					<Num v-model="scope.row.euOriginalPrice" :min="min" :max="max" :precision="precision" />
				</template>
			</el-table-column>
			<el-table-column label="成本价" width="110px">
				<template #default="scope">
					<Num v-model="scope.row.costPrice" :min="min" :max="max" :precision="precision" />
				</template>
			</el-table-column>
			<el-table-column prop="skuCode" label="自编SKU" width="90px" />
			<el-table-column label="外部SKU" width="90px">
				<template #default="scope">
					<el-input maxlength="200" v-model="scope.row.externalSku"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="供应商SKU" width="100px">
				<template #default="scope">
					<el-input maxlength="200" v-model="scope.row.supplierSku"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="库存" width="110px">
				<template #default="scope">
					<Num v-model="scope.row.stock" />
				</template>
			</el-table-column>
			<el-table-column label="图片" width="70">
				<template #default="scope">
					<span @click="uploadPic(scope.$index)" style="cursor: pointer">
						<Img :src="scope.row.pic" :uploadable="true" width="50px" height="50px" />
					</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="120">
				<template #default="scope">
					<el-button @click="handleEdit(scope.row, scope.$index)">编辑商品参数</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog v-model="dialogFormVisible" title="编辑商品参数" width="800px">
			<header style="margin-bottom: 10px">
				<el-button type="primary" @click="plusParams">新增参数</el-button>
			</header>
			<el-table :data="ruleForm.skuParameterList" style="width: 100%">
				<el-table-column label="参数">
					<template #default="scope">
						<ParamsSelector v-model="scope.row.paramsItem" />
					</template>
				</el-table-column>
				<el-table-column label="参数值">
					<template #default="scope">
						<el-input show-word-limit maxlength="200" v-model="scope.row.attributeValue"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="前端是否显示">
					<template #default="scope">
						<MySwitch v-model="scope.row.status"></MySwitch>
					</template>
				</el-table-column>
				<el-table-column label="排序">
					<template #default="scope">
						<Num v-model="scope.row.sort" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="60px" fixed="right">
					<template #default="scope">
						<el-button @click="toDel(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="save">更新至列表</el-button>
				</span>
			</template>
		</el-dialog>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="1" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped>
.SpecificationSet {
	.SpecificationSet_table {
		:deep(.el-table__body) {
			.cell {
				padding-left: 5px;
				padding-right: 5px;
			}
		}
	}
}
</style>
